@extends('wap.layout')
@section('search', 'onkeydown=search();')
@section('content')
	<!--搜索框-->
	<div class="weui-search-bar" id="searchBar">
	  <form class="weui-search-bar__form" onkeydown="if(event.keyCode==13){return false;}">
	    <div class="weui-search-bar__box">
	      <i class="weui-icon-search"></i>
	      <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
	      <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
	    </div>
	    <label class="weui-search-bar__label" id="searchText">
	      <i class="weui-icon-search"></i>
	      <span>搜索</span>
	    </label>
	  </form>
	  <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
	</div>
	<!--搜索框end-->
	<!--展示区域-->
	<ul class="preArea bgF">

	</ul>
	<!--展示区域end-->
	<!--成员列表-->
	<div class="weui-cells weui-cells_checkbox gpList">
	</div>
	<!--成员列表end-->
	<!--第一次打开或搜索无结果，则显示-->
	<div class="pldIcon2"><!--<i></i>--></div>
	<div class="pInfoBar">请在搜索栏中输入你想要@的人分享文件，目前只支持汉字模糊搜索。</div>
	<!--第一次打开或搜索无结果，则显示end-->
	<div class="atBtnBox">
		<div class="weui-flex">
	      <div class="weui-flex__item">
	      	<div class="pd">
	      		<a href="javascript:void(0)" id="cancelAt" class="weui-btn weui-btn_default">取消</a>
	      	</div>
	      </div>
	      <div class="weui-flex__item">
	      	<div class="pd">
	      		<a href="javascript:;" class="weui-btn weui-btn_primary" id="selectBtn">确定</a>
	      	</div>
	      </div>
	    </div>
	</div>
@stop

@section('ownJs')
<script>
	var file_id = getParameterByName('user_file_id');
	var is_public = parseInt(getParameterByName('is_public'));
	var atUserStr = getcookie('atUserStr'),search_name;
	var userId = '', atUserList = [];
$(function() {
	if (atUserStr != '') {
		atUserList = atUserStr.split(',');
		show_selected();
	}
	//取消选择
	$('#cancelAt').click(function(){
		location.href = '/detail?user_file_id='+file_id+'&is_public='+is_public;
	});
	//选人
	$('#selectBtn').click(function(){
		var atUserStr=atUserList.join(',');//将数组元素连接起来以构建一个字符串
		addcookie('atUserStr', atUserStr, 12);
		location.href = '/detail?user_file_id='+file_id+'&is_public='+is_public;
	});

	$('.preArea').on('click', '.item', function(){
		delete_user($(this).data('id'));
		if($('#s'+$(this).data('id')).is(':checked') === true){
			$('#s'+$(this).data('id')).removeAttr('checked');
		}
	});

});
	function show_selected(){
		var html = '';
		userId = [];
		$.each(atUserList,function(k,v){
			html += '<li class="item" data-id="'+v.split('|')[0]+'">'
					+v.split('|')[1]
					+'</li>';
			userId.push(v.split('|')[0]);
		});
		$('.preArea').html(html);
	}
	function delete_user(id){
		for (var i = 0; i < atUserList.length; i++) {
			if(atUserList[i].split('|')[0] == id) {
				atUserList.splice(i, 1);
			}
		}
		show_selected();
	}
	function search(){
		if (event.keyCode==13){  //回车键的键值为13
			search_name = $('#searchInput').val();
			getUsers();
		}
	}
function getUsers(){
	$.ajax({
		type: 'get',
		url: ' /users',
		data:{name:search_name},
		dataType: 'json',
		success: function (result) {console.log(result);
			if (result.code == 0) {
				var users = result.data.users;
				if(users.length > 0){
					var html = '';
					$.each(users,function(k,v){
						var checkHtml = '';
						if(contains(userId, v.id)){
							checkHtml = 'checked';
						}
						html += '<label class="weui-cell weui-check__label" for="s'+ v.id+'">'
								+'<div class="weui-cell__bd">'
								+'<p><img src="'+ v.avatar+'"></p>'
								+'<p>'+ v.nickname+'</p>'
								+'</div>'
								+'<div class="weui-cell__hd">'
								+'<input type="checkbox" class="weui-check" name="checkbox" data-name="'+ v.nickname+'" data-id="'+ v.id+'" id="s'+ v.id+'" '+checkHtml+'>'
								+'<i class="weui-icon-checked"></i>'
								+'</div>'
								+'</label>';

					});
					$('.gpList').html(html);
					$('.pldIcon2').hide();
					$('.pInfoBar').hide();

					$('input[name="checkbox"]').click(function(){
						if($(this).is(':checked') === false){
							delete_user($(this).data('id'));
						}else{
							atUserList.push($(this).data('id')+'|'+$(this).data('name'));
							show_selected();
						}
					});
				}else{
					$('.pldIcon2').show();
					$('.pInfoBar').show();
				}
			}else if(result.code == -1){
				location.href = '/error';
			}
		}
	});
}
	function contains(arr, obj) {
		var i = arr.length;
		while (i--) {
			if (arr[i] == obj) {
				return true;
			}
		}
		return false;
	}
</script>
@stop